<template>
  <div class="">
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item><i class="el-icon-lx-copy"></i> 消息</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <div class="container">
      <el-tabs v-model="message">
        <el-tab-pane :label="`未读消息(${unReadMsg ? unReadMsg.length : 0})`" name="first">
          <el-table :data="unReadMsg" :show-header="false" style="width: 100%"
                    @selection-change="handleSelectionChange">
            <el-table-column>
              <template #default="scope">
                <span class="message-title">{{ scope.row.title }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="content"></el-table-column>
            <el-table-column prop="sendTime" width="180"></el-table-column>
            <el-table-column width="120">
              <template #default="scope">
                <el-button size="small" @click="handleMsgStatus(scope.row.id, 'READ')">标为已读</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane :label="`已读消息(${readMsg ? readMsg.length : 0})`" name="second">
          <el-table :data="readMsg" :show-header="false" style="width: 100%">
            <el-table-column>
              <template #default="scope">
                <span class="message-title">{{ scope.row.title }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="content"></el-table-column>
            <el-table-column prop="sendTime" width="180"></el-table-column>
            <el-table-column width="120">
              <template #default="scope">
                <el-button type="danger" @click="handleMsgStatus(scope.row.id, 'RECYCLED')">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane :label="`系统消息(${sysNoticeMsg ? sysNoticeMsg.length : 0})`" name="third">
          <el-table :data="sysNoticeMsg" :show-header="false" style="width: 100%">
            <el-table-column>
              <template #default="scope">
                <span class="message-title">{{ scope.row.title }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="content"></el-table-column>
            <el-table-column prop="sendTime" width="180"></el-table-column>
          </el-table>
        </el-tab-pane>
        <el-tab-pane :label="`回收站(${recycleMsg != undefined ? recycleMsg.length : 0})`" name="four">
          <el-table :data="recycleMsg" :show-header="false" style="width: 100%">
            <el-table-column>
              <template #default="scope">
                <span class="message-title">{{ scope.row.title }}</span>
              </template>
            </el-table-column>
            <el-table-column prop="content"></el-table-column>
            <el-table-column prop="sendTime" width="180"></el-table-column>
            <el-table-column width="120">
              <template #default="scope">
                <el-button @click="handleDel(scope.row.id)">清空</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>

import {directMsgRemoveApi, directMsgEditMsgStatusApi} from "../api/im/directMsg";
import {msgIntegrationGetMsgApi} from "../api/im/msgIntegration";

export default {
  data() {
    return {
      message: 'first',
      showHeader: false,
      multipleSelection: [],
      unReadMsg: [],
      readMsg: [],
      recycleMsg: [],
      sysNoticeMsg: []
    }
  },
  created() {
    const {id, command} = this.$route.query;
    this.getMsg(id, command);
  },
  methods: {
    // 多选操作
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getMsg(id, command) {
      msgIntegrationGetMsgApi({size: 10, id, command}).then((res) => {
        if (command == 'DIRECT_MSG') {
          this.message = "first";
        } else if (command == 'SYS_NOTICE_MSG') {
          this.message = "third";
        }
        const data = res.bizData;
        this.unReadMsg = data.unReadMsgs;
        this.readMsg = data.readMsgs;
        this.recycleMsg = data.recycleMsgs;
        this.sysNoticeMsg = data.sysNoticeMsgs;
      });
    },
    handleMsgStatus(id, status) {
      directMsgEditMsgStatusApi({id, status}).then((res) => {
        this.getMsg();
      });
    },
    handleDel(id) {
      // 二次确认删除
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning",
      }).then(() => {
        directMsgRemoveApi({ids: id}).then((res) => {
          this.getMsg();
        });
      });
    },
    delAllSelection() {
      const length = this.multipleSelection.length;
      if (length < 1) {
        this.$message.error("请选择数据");
        return;
      }
      this.multipleSelection.filter((item) => {
        this.delList.push(item.id);
      });
      const ids = this.delList.join(",");
      this.$confirm("确定要删除吗？", "提示", {
        type: "warning",
      }).then(() => {
        directMsgRemoveApi({ids: ids}).then((res) => {
          this.getMsg();
        });
      });
    },
  },
  computed: {}
}

</script>

<style>
.message-title {
  cursor: pointer;
}

.handle-row {
  margin-top: 30px;
}
</style>

